import { createStore } from 'vuex'

// A 模块
const A = {
	state: {
		userName: 'moduleA',
	},
	getters: {
		newName(state) {
			return `${state.userName} ~~~~~~`
		},
	},
}
// B 模块
const B = {
	namespaced: true,
	state: {
		userName: 'moduleB',
	},
}

export default createStore({
	state: {
		userName: '张三',
	},
	getters: {
		newName(state) {
			return `${state.userName} !!!`
		},
	},
	mutations: {
		updateName(state) {
			state.userName = '李四'
		},
	},
	actions: {
		updateName(context) {
			setTimeout(() => {
				context.commit('updateName')
			}, 1000)
		},
	},
	modules: { A, B },
})
/*
   1 直接使用
   <span> {{ $store.state.userName}} </span>

   <span> {{ $store.getters.newName}} </span>

   aIncrement(context, payLoad)
   @btn  this.$store.dispatch("aIncrement",1111)

	 模块中
	 $store.state.A.userName
	 $store.state.B.userName
	 只有 state 区分模块  其他的都是全局的
	 $store.getters.newName   A模块中的getters

	 有命名空间的模块
	 $store.getters["B/newName"]

   2 setup 中
   import { useStore } from "vuex"
   setup(){
     const store = useStore()
     const name = store.state.userName

     const name2 = store.getters.newName

     store.commit("updateName")

     store.dispatch("updateName")

		 模块中  开启了命名空间
		 store.commit("B/updateName")
		 store.dispatch("B/updateName")

   }

	 vuex-持久化    vuex中存储且需要本地存储
	 默认  localStorage  存储
	 vuex-persistedstate  持久化  插件

	 npm i vuex-persistedstate

	 import createPersistedstate from 'vuex-persistedstate'

	// vuex index 中 配置插件
	 plugins: [createPersistedstate({
		// 本地存储的名字
		key:'eRabbit-client-pc',
		// 指定存储的模块
		paths:['user','cart'],
	 })]

	 ================================

	 vuex 获取属性 需要使用 computed 才是响应式的
	 const profile = computed(() => store.state.user.profile)

*/
